<template>
	<div style="margin-left: 5px;">
        <div>
         
				<div >
				 <h3 style="display:inline-block">{{Data.CodeNum}}.</h3> 	<span v-html="Data.Title" style="display:inline-block"></span>
                    <el-button   @click="divvisibility(1)" type="text" style="float:right" v-if="!preview" >{{see}}</el-button>
                    
				</div>
                
				<div class="option-area" style="margin: 5px;" v-if="visible">
                    <!--垂直排列-->
                     <div v-if="Data.OrderValue==0" style="float:left" >
                         <el-row v-for="opt in Data.Options">
                               <el-col :span="24">
                                    <table>
                                        <tr style="float:left">
                                            <div align="center">
											    <tr>
												    <el-checkbox v-model="Data.SelectedValues"  @change="handleSel(opt.itemId)" :label="opt.itemId" > {{opt.itemName}}</el-checkbox>
											    </tr>
											    <tr>
												    <img   v-show="opt.ImageUrl!=' '" :src="opt.ImageUrl"/>
											    </tr>
									        </div>
                    
                                            <td>  
                                                  <div v-if="opt.canFillBlank">
                                                    <el-input size="mini" v-if="Data.DataTypes!=1" v-model="opt.blankText"  style="width:100px" />
                                                    <el-input-number size="mini"  v-if="Data.DataTypes==1" v-model="opt.blankText"></el-input-number>
                                                 </div>
                                            </td>
                                            <td>  <el-alert v-if="opt.memo!=''"  v-bind:title="opt.memo"  type="info" :closable="false"></el-alert></td>
                                        </tr>
                                    </table>
                            </el-col>
                         </el-row>  
                            
                           
                    </div>
				</div>
         </div>
	<div style="clear:both"></div>
    
    <div id='editor' v-if='canEdit==true' style="margin: 5px;">
     <el-card class="box-card" style="margin-top:20px" >
  	    <EditorComponent v-model="Data.Title"  :Html="Data.Title" />
		<div class="radius" style="border-radius:2px; height:50px">
                            <table class='setting-table ' >
                                <tr>
                                     <td>  <el-checkbox  v-model="Data.MustAnswer"  >必答题</el-checkbox></td>
                                     <td><BatchAddComponent v-model="msg" @getitem="itemNameArry" :itemnamearry="itemname"></BatchAddComponent></td>
                                     <td>     
									 <OrderByComponent v-model="Data.OrderValue"  />
                                    </td>
                                    <td>
                                       <DataTypeSelector  @EvGetDataType="SetOrderBy" />
                                    <td>
                                     <td >  
                                          至少选择： <el-input-number size="mini" :min=0  v-bind:max="getMaxSel()" v-model="Data.MinSel"></el-input-number>
                                     </td>
                                      <td>  
                                          最多选择： <el-input-number size="mini" :min=0 v-bind:max="getMaxSel()" v-model="Data.MaxSel"></el-input-number>
                                     </td>
                                </tr>
                            </table>
			

		</div>
     
	 <el-table :fit="true" :data="Data.Options" style="width: 100%">
      <el-table-column  label="选项文字" >
		   <template slot-scope="scope">
			   <div id='title-row' >
				   <el-input size="small" style='display: inline-block;'  v-model="scope.row.itemName" placeholder="请输入内容"></el-input>
			   </div>
			</template>
	  </el-table-column>

		<el-table-column  label="操作"  >
				  <template slot-scope="scope">
						<div style='display: inline-block;margin-top: 5px;'>
							<el-button type="warning" @click="remove(scope.row.itemId)" size="mini" style='display: inline-block;' icon="el-icon-minus" circle></el-button>
							<el-button type="danger"  @click="insert(scope.row.itemId)" size="mini" style='display: inline-block;'  icon="el-icon-plus" circle></el-button>
							<el-button  size="mini" style='display: inline-block;' @click='moveUp(scope.row.itemId)' icon="el-icon-top" circle></el-button>
							<el-button  size="mini" style='display: inline-block;' @click='moveDown(scope.row.itemId)' icon="el-icon-bottom" circle></el-button>
						</div>
				 </template>
		</el-table-column>

        <el-table-column label="图片">
           <template slot-scope="scope">
                <ImageBase64Componet @HasGotImage="savepicture" @clearpicture="clearpicture(scope.row.itemId)" :param="scope.row.itemId" > </ImageBase64Componet>
			</template>
        </el-table-column>

	    <el-table-column  label="说明"  >
			  <template slot-scope="scope">
			 <el-input v-model="scope.row.memo" size="small" placeholder="请输入内容"></el-input>
			 </template>
	    </el-table-column>

		 <el-table-column  label="允许填空">
			 <template slot-scope="scope">
				 <el-checkbox  v-model="scope.row.canFillBlank" ></el-checkbox>
			 </template>
	    </el-table-column>

        <el-table-column prop="defaultSel" label="互斥" >
			    <template slot-scope="scope">
					 <el-checkbox  v-model="scope.row.Exclusive" ></el-checkbox>
				 </template>
		</el-table-column> 

		 <el-table-column prop="defaultSel" label="默认" >
			    <template slot-scope="scope">
					 <el-checkbox  v-model="scope.row.defaultSel" ></el-checkbox>
				 </template>
		</el-table-column> 

        <el-table-column v-if="Data.DataType==1" prop="defaultSel" label="最小值" >
			    <template slot-scope="scope">
					 <div>
                    <el-input-number size="mini"  v-model="scope.row.MinValue"></el-input-number>
					 </div>
				 </template>
		</el-table-column> 

        <el-table-column v-if="Data.DataType==1" prop="defaultSel" label="最大值" >
			    <template slot-scope="scope">
					 <div>
                    <el-input-number size="mini"  v-model="scope.row.MaxValue"></el-input-number>
					 </div>
				 </template>
		</el-table-column> 
			 


    </el-table>
        <button @click="getanswer">answer</button>
	     <el-button type="warning " style='margin-top:5px;width:100%' @click="canEdit=false">完成编辑</el-button>
	    </el-card>
		 </div>
		
	</div>
</template>

<script lang='ts'>
  
    import {Component, Vue, Watch, Prop } from 'vue-property-decorator'
    import MultiSelOption from './ts/MultiSelOption';
    import MultiSelSubject from './ts/MultiSelSubject'
    import OrderBy,{OrderByTypes} from './ts/OrderByTypes'
    import TBaseQuestion from './ts/TBaseQuestion'
    import DataTypeSelector from './DataTypeSelector.vue'
    import EditorComponent from './EditorComponent.vue'
    import { QuestionDataTypes,QuestionTypes } from './ts/QuestionDataTypes';
    import OrderByComponent from './OderByComponent.vue';
    import BatchAddComponent from './BatchAddComponent.vue';
    import ImageBase64Componet from './ImageBase64Componet.vue';
import { Option } from 'element-ui';
	
 @Component(
     {
         components:{EditorComponent,DataTypeSelector,OrderByComponent,BatchAddComponent,ImageBase64Componet}
     }
 )
	export  default class mutiSelComponent  extends TBaseQuestion<MultiSelOption,MultiSelSubject> {


      $name:string= 'radioSelComponent'
       

      CheckedValues:Array<string>=[];
      
      options:MultiSelOption[]=[];
	  msg:string ="";
	  gotMsg:string[]=[];
      itemname="";
      
      see="显示";
      visible=false;

     
	   @Watch('msg')
	    getstr(){
			console.log(this.msg);
			this.gotMsg=this.msg.split('\n')
			this.gotMsg.forEach(element => {
			  if(element!=" "){
			    var opt =new MultiSelOption();
			    opt.itemName=element;
			    this.options.push(opt);
			  }
		    });
		    this.Data.Options=this.options;
			this.options=[];
			
       }
       itemNameArry(){
        this.itemname=this.getOptionText();
        }
	   //接收图片地址
			savepicture(id:string,url:string){
				console.log(id);
				let opt=this.Data.Options;
				let option=opt[opt.findIndex(item=>item.itemId===id)];
				option.ImageUrl=url;
            }
        //清除图片
		 clearpicture(id:string){
         let opt=this.Data.Options;
				 let option=opt[opt.findIndex(item=>item.itemId===id)];
				 option.ImageUrl=" ";
		 }
	   //获取options中每一项的name
	    getOptionText():string{
			let options=this.Data.Options[0].itemName+"\n";
			let n=this.Data.Options.length;
			for(let i=1;i<n;i++){
				if(i<(n-1)){
					options+=this.Data.Options[i].itemName+"\n";
				}else{
                    options+=this.Data.Options[i].itemName;
				}
			}
			return options;
			
        }
      constructor ()
      {
     
        super(MultiSelOption,MultiSelSubject);
        this.Data.QuestionType=QuestionTypes.qtCheckbox;

        for(var i:number=0;i<5;++i)
          {
              var opt = new MultiSelOption();
              opt.itemName='选项'+i;
              this.Data.Options.push(opt);
          }
          
           this.Data.MaxSel=this.Data.Options.length;;
      }

    mounted()
    {
        super.mounted();
          this.initProps();
         console.info("component mounted!");
    }
     //显示题目内容div
    // divvisibility(){
    //     this.visible=!this.visible;
    //     if(this.see==="显示"){
    //       this.see="隐藏";
    //     }else{
    //       this.see="显示";
    //     }
    // }
     handleSel(id:string):void
     {
  
         //是否超出选择的最多项目
         if(this.Data.SelectedValues.length> this.Data.MaxSel)
         {
             this.Data.SelectedValues.pop();
         }

         //判断互斥
        var index=this.Data.Options.findIndex(item=>item.itemId===id)
        if(index<0)
            return;
        var selIndex=this.Data.SelectedValues.findIndex(item=>item===id)
        var opt = this.Data.Options[index];

        if(opt.Exclusive&&selIndex>=0)
        {
            this.Data.SelectedValues=[];
            this.Data.SelectedValues.push(id);

            
        }
        else
        {
          var  _exclusive:Boolean=false;
            this.Data.SelectedValues.forEach(e => {
                 var _index=this.Data.Options.findIndex(item=>item.itemId===e)
                 if(this.Data.Options[_index].Exclusive&&this.Data.Options[_index].itemId!=id)
                 {
                         _exclusive=true;
                     
                 }

            });

            if(_exclusive)
            {
                  this.Data.SelectedValues=[];
                  this.Data.SelectedValues.push(id);
            }
        }

     }
     

      initOptions()
      {
           for(var i:number=0;i<5;++i)
          {
              var opt = new MultiSelOption();
              opt.itemName='选项'+i;
              this.Data.Options.push( opt);
          }

      }

     
    //输入框内容改变
    inputchange(){
		this.msg=this.getOptionText();
	}
	//删除选项
	remove(str:string):void{
		super.remove(str);
		this.msg=this.getOptionText();
	}
	//插入选项
    insert(id:string):void
    {
        let options= this.Data.Options;
        options.splice(options.findIndex(item=>item.itemId===id)+1,0,this.createNewOption(MultiSelOption));
         this.Data.MaxSel=this.Data.Options.length;
         this.msg=this.getOptionText();
    };
    
	//向上移动选项
	moveUp(id:string):void{
		super.moveUp(id);
		this.msg=this.getOptionText();
	}
	moveDown(id:string){
		super.moveDown(id);
		this.msg=this.getOptionText();
	}
     getQuestionData():any
     {
         return this.Data;
     }

     setQuestionData(data:string)
     {
           
     };

     getTitle():void
     {
        // console.info(Data.Title);
         // this.Data.Title;
	 }
     
     
     getMaxSel():number
     {
         return this.Data.Options.length;
     }

	 setTitle(txt:string):void
	 {
		
     }
     
    GetHtml(html:string):void
     {
         this.Data.Title=html;
     }

    SetDType(dType:QuestionDataTypes)
     {
         this.Data.DataType=dType;
         
	 }
	 
	 SetOrderBy(order:OrderByTypes)
	 {
      
		 this.Data.OrderValue=order;
     }
     getanswer():object[]{
        
         
         return  this.Data.answer;
        
    }
	 
	 
	}
</script>
 
<style>
.optionLayout{
                display: flex;
                display: -webkit-flex;
                border: 1px solid gainsboro;
                
                width: 100%;
                align-items:center;
                justify-content:left;
            }
.setting-table td{  text-align: center;vertical-align:middle;} table{ width: 100%;font-size: 14px;margin-top: 5px}

</style>
